$colorpicker-panel-border: $dropdown-panel-border !default;
$colorpicker-panel-background-color: $dropdown-open-background-color !default;
$colorpicker-panel-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.06) !default;
$colorpicker-panel-padding: 0.625rem !default;

.rz-colorpicker {
  display: inline-flex;
  align-items: center;
  cursor: pointer;

  @extend %input;

  &.rz-disabled {
    color: $input-disabled-color;
    cursor: default;
  }
}

.rz-colorpicker-trigger {
  border: none;
  appearance: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: $editor-button-color;
  background-color: inherit;

  .rzi {
    &:before {
      content: 'arrow_drop_down';
    }
  }
}

.rz-colorpicker-popup {
  display: none;
  position: absolute;
  border: $colorpicker-panel-border;
  background-color: $colorpicker-panel-background-color;
  box-shadow: $colorpicker-panel-shadow;
  min-width: 200px;
  max-width: 280px;
  padding: $colorpicker-panel-padding;
  border-radius: $border-radius;
}

.rz-colorpicker-value {
  flex: 1;
  border-radius: $input-border-radius;
  border: $input-border;
  min-width: 20px;
  min-height: 20px;
}
.rz-saturation-picker {
  height: 150px;
  position: relative;
  touch-action: none;
}

.rz-saturation-white {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.rz-saturation-black,
.rz-saturation-white {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.rz-saturation-black {
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.rz-saturation-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px,
    rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px;
}

.rz-hue-picker {
  margin-bottom: 4px;
  touch-action: none;
  position: relative;
  background-image: linear-gradient(
    to right,
    rgb(255, 0, 0) 0%,
    rgb(255, 255, 0) 17%,
    rgb(0, 255, 0) 33%,
    rgb(0, 255, 255) 50%,
    rgb(0, 0, 255) 67%,
    rgb(255, 0, 255) 83%,
    rgb(255, 0, 0) 100%
  );
  height: 12px;
}

.rz-alpha-picker {
  touch-action: none;
  position: relative;
  height: 16px;
}

.rz-hue-handle,
.rz-alpha-handle {
  position: absolute;
  height: 100%;
  width: 6px;
  border: 1px solid #fff;
  transform: translateX(-50%);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px,
    rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px;
}

.rz-colorpicker-preview-area {
  display: flex;
}

.rz-hue-and-alpha {
  flex: 1;
  padding-right: 10px;
}

.rz-alpha-picker,
.rz-colorpicker-preview {
  &:before {
    position: absolute;
    z-index: -1;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%),
      linear-gradient(-45deg, #808080 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #808080 75%),
      linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  }
}

.rz-colorpicker-preview {
  position: relative;
  width: 32px;
  height: 32px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset,
    rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
}

.rz-colorpicker-rgba {
  display: flex;
}

.rz-color-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  &:not(:last-child) {
    margin-right: 4px;
  }

  .rz-textbox {
    width: 100px;
    padding: 0 3px;
    height: 30px;
  }

  .rz-spinner {
    padding: 1px 3px;
    height: 30px;

    .rz-spinner-input {
      padding: 0;
    }

    button {
      display: none;
    }
  }
}

.rz-colorpicker-button {
  justify-content: flex-end;
  display: flex;
}

.rz-colorpicker-section {
  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

.rz-colorpicker-colors {
  display: flex;
  flex-wrap: wrap;
  margin-left: -4px;
  margin-right: -4px;
}

.rz-colorpicker-item {
  width: 16px;
  height: 16px;
  margin: 4px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset,
    rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
}
